<!-- 热卖组件 -->
<template>
  <div class="hot-area">
    <div class="hot-title">热卖商品</div>
    <div class="hot-goods">
      <van-list>
        <van-row>
          <van-col span="12" v-for="(item, index) in hotGoodsData" :key="index">
            <div class="goods-info" @click="goGoodsDetail(item.goodsId)">
              <div class="goods-image">
                <img v-lazy="item.image" alt="热卖图片" width="50%" />
              </div>
              <div class="goods-name">{{ item.name | nameFilter }}</div>
              <div class="goods-price">¥{{ item.price | moneyFilter }}</div>
            </div>
          </van-col>
        </van-row>
      </van-list>
    </div>
  </div>
</template>

<script>
import toMoney from '../../filter/moneyFilter';
import { sliceName } from '../../filter/moneyFilter';
export default {
  data () {
    return {
    };
  },
  props: ['hotGoodsData'],
  filters: {
    moneyFilter(money) {
      return toMoney(money);
    },
    nameFilter(name) {
      return sliceName(name);
    }
  },
  methods: {
    goGoodsDetail(goodsId) {
      // 使用‘$router’，跳转页面，并传递参数
      this.$router.push({
        name: 'GoodsDetail',
        query: { goodsId },
      })
    }
  }
}
</script>
<style scoped>
  .hot-area{
    text-align: center;
    font-size:12px;
    /* 解决地步tabbar盖住热卖商品展示的问题 */
    margin-bottom: 50px;
  }
  .hot-title {
    padding: .2rem;
    font-size: 14px;
  }
  .hot-goods {
    background-color: #fff;
  }
</style>
